body {
  &.dark-theme {
    * {
      &::-webkit-scrollbar-track {
        background: #21252B;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #666666;
      }
    }

    .comp_topmenu {
      background: #21252B;
      border-bottom: 1px solid #333842;

      .btn-menubar {
        &.menu {
          span {
            background: #cccccc;
          }

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }

      .right-side {
        button {
          color: rgba(255, 255, 255, 0.75);

          svg {
            fill: #bbb;
          }

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }
        }

        .command-buttons {
          .btn-menubar {
            &.minimize,
            &.maximize {
              svg {
                stroke: #cccccc;
              }

              &:hover {
                background: rgba(255, 255, 255, 0.1);
              }
            }

            &.close {
              svg {
                stroke: #cccccc;
              }

              &:hover {
                background: #e4142c !important;

                svg {
                  stroke: #ffffff;
                }
              }
            }
          }
        }
      }
    }

    .content-main-container {
      .content-container {
        background: #282C34;
      }
    }

    .comp_fe_search-field {
      .search-container {
        .search-icon-container {
          svg {
            fill: rgba(255, 255, 255, 0.42);
          }
        }

        .clear-icon-container {
          svg {
            fill: rgba(255, 255, 255, 0.42);
          }
        }

        .form-control {
          background: transparent;
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: #eee;

          &::placeholder {
            color: #aaa;
          }
        }
      }
    }

    .comp_sidebar {
      background: #333842;
      border-right: 1px solid #333842;

      .no-item-text {
        color: #eeeeee;
      }

      .header {
        .sidebar-title {
          color: #eeeeee;
        }

        .new-snippet-container {
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);

          &:hover {
            background: rgba(0, 0, 0, 0.1);
          }

          .text {
            color: #eeeeee;
          }

          .plus {
            background: #21252B;
            color: #888888;
          }
        }

        .main-menu-container {
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .search-result-container {
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
      }

      .menu-list {
        .menu-list-item {
          .text-container {
            color: #eeeeee;
          }

          &.active {
            background: #0078d4;

            .text-container {
              color: #ffffff;
            }

            svg {
              fill: #ffffff !important;
            }
          }

          &:not(.active) {
            &:hover {
              background: rgba(0, 0, 0, 0.1);
            }
          }

          .icon-container {
            svg {
              fill: #cccccc;
            }
          }
        }
      }
    }

    .comp_command-area {
      .comp_content-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.20);
        background: #282C34;

        .left-side {
          .title-header {
            svg {
              fill: #cccccc;
            }

            .title {
              color: #cccccc;
            }
          }

          .sub-text {
            color: #BBBABB;
          }
        }
      }
    }

    .comp_command-list-item {
      .sub-container {
        border-bottom: 1px solid rgba(255, 255, 255, 0.20);
        background: #282C34;

        &:hover {
          background: #333842;
        }

        .right-side {
          svg {
            fill: #fabe77;
          }
        }

        .code {
          color: #dddddd;

          span {
            color: #da4453;
          }
        }

        .title {
          color: #dddddd;
        }

        .tags-list {
          li {
            background: #333842;
            color: #cccccc;
          }
        }
      }

      .command-list-menu {
        li {
          svg {
            fill: #cccccc;
          }

          &.favourite-true {
            svg {
              path {
                fill: #fabe77;
              }
            }
          }

          &.favourite-false {
            svg {
              stroke: #a0a0a0;
            }
          }
        }
      }
    }

    .comp_footer {
      background: #21252B;
      border-top: 1px solid #333842;

      .app-name {
        color: #aaaaaa;

        small {
          color: #999999;
        }
      }
    }

    .comp_confirm-dialog {
      background: rgba(0, 0, 0, 0.5);

      .confirm-dialog-content {
        background: #fff;

        .confirm-dialog-header {
          border-bottom: 1px solid #eee;

          .title {
            color: #333;
          }
        }

        .confirm-dialog-body {
          .text {
            color: #333;
          }
        }

        .confirm-dialog-footer {
          border-top: 1px solid #eee;
        }
      }
    }

    .comp_modal {
      &.visible {
        .modal-overlay {
          background: rgba(0, 0, 0, 0.5);
        }
      }

      .modal-header {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        background: #21252B;

        .btn-close {
          background: transparent;

          span {
            background: #eee;
          }
        }

        .title {
          color: #ddd;
        }
      }

      .modal-content {
        background: #282C34;

        .modal-footer {
          border-top: 1px solid rgba(255, 255, 255, 0.15);
          background: #21252B;
        }
      }
    }

    .comp_settings-modal {
      .tabs-header-container {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);

        ul {
          li {
            color: #ffffff;

            &.active {
              background: #0078d4;
              color: #ffffff;
            }
          }
        }
      }

      .tabs-content-container {
        .content {
          .sub-title {
            color: #dddddd;
          }

          .form-control {
            &:read-only {
              background: #21252B;
            }
          }

          .info {
            color: #999;
          }

          .storage-restore-container {
            ul {
              border: 1px solid #ced4da;

              li {
                .name,
                span {
                  color: #bbbbbb;
                }

                &:hover {
                  background: #21252B;
                }
              }
            }
          }
        }

        .theme-section {
          .text-container {
            color: #dddddd;
          }
        }

        .about-section {
          * {
            color: #dddddd;
          }

          .product-name {
            small {
              color: #999999;
            }
          }

          .created-by {
            .author {
              color: #0078d4;
            }
          }

          .description {
            color: #999999;
          }

          .link-list {
            .link {
              color: #0078d4;
            }
          }
        }

        .update-section {
          .info {
            color: #ddd !important;
          }
        }
      }
    }

    .form-group {
      &.has-error {
        .form-label {
          color: #F44336;
        }

        .form-control,
        .command-container {
          border-color: #F44336 !important;

          .header {
            border-bottom-color: #F44336 !important;
            background: #F44336;

            i {
              color: #ffffff !important;
            }
          }
        }
      }
    }

    .comp_fe_text-field {
      .form-group {
        label {
          &.error-label {
            color: #F44336;
          }
        }

        .form-control {
          color: #ddd;
          background-color: #282C34;
          border: 1px solid rgba(255, 255, 255, 0.35);
        }
      }
    }

    .comp_fe_password-field {
      .form-group {
        label {
          &.error-label {
            color: #F44336;
          }
        }

        .form-control {
          color: #495057;
          background-color: #fff;
          border: 1px solid #ced4da;
        }

        button {
          background: #ffffff;
          border-left: 1px solid #ced4da;

          &:hover {
            background: #f9f9f9;
          }

          svg {
            stroke: #555555;
          }
        }
      }
    }

    .comp_fe_choice-field {
      .form-group {
        label {
          &.error-label {
            color: #F44336;
          }
        }

        .form-control {
          color: #dddddd;
          background-color: transparent;
          border: 1px solid rgba(255, 255, 255, 0.35);

          option {
            background: #282C34;
            color: #eeeeee;
          }
        }
      }
    }

    .comp_fe_markdown-field {
      .rc-md-editor {
        border: 1px solid rgba(255, 255, 255, 0.35);
        background-color: #282C34;

        .rmel-iconfont {
          color: #ccc;

          &:hover {
            color: #eeeeee;
          }
        }

        textarea {
          background-color: #282C34 !important;
          color: #eeeeee !important;
        }

        .custom-html-style {
          color: #dddddd;
        }

        .rc-md-navigation {
          border-bottom: 1px solid rgba(255, 255, 255, 0.35);
          background-color: #21252B;
        }
      }

      .form-group {
        .title-area {
          .md-link-text {
            color: #aaaaaa;
          }
        }

        label {
          &.error-label {
            color: #F44336;
          }
        }

        .form-control {
          color: #495057;
          background-color: #fff;
          border: 1px solid #ced4da;
        }
      }
    }

    .comp_fe_tags-field {
      .form-group {
        label {
          &.info-text {
            color: #777777;
          }

          &.error-label {
            color: #F44336;
          }
        }

        .form-control {
          color: #495057;
          background-color: transparent;
          border: 1px solid rgba(255, 255, 255, 0.35);
        }
      }

      .tags-input-main-container {
        color: #495057;
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.35);

        .tag-wrapper {
          border: 1px solid rgba(255, 255, 255, 0.32);
          background: #282C34;
          color: #aaaaaa;

          .close-link {
            background: #21252B;
            border-left: 1px solid rgba(255, 255, 255, 0.32);
          }
        }

        .input-container {
          .form-element {
            background: transparent;
            color: #ddd;

            &::placeholder {
              color: #bbbbbb;
            }
          }

          .auto-suggestion-container {
            border: 1px solid rgba(255, 255, 255, 0.35);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);

            ul {
              background: #282C34;

              li {
                border-bottom: 1px solid rgba(255, 255, 255, 0.35);
                color: #aaaaaa;

                &:last-child {
                  border: none;
                }

                b {
                  color: #eeeeee;
                }

                &:hover {
                  background: lighten(#21252B, 7);
                }

                &.active {
                  background: #0078d4;
                  color: #ffffff;

                  b {
                    color: #ffffff;
                  }
                }
              }
            }
          }
        }
      }
    }

    .comp_fe_command-field {
      .form-group {
        label {
          &.error-label {
            color: #F44336;
          }
        }

        .form-control {
          color: #495057;
          background-color: #fff;
          border: 1px solid #ced4da;
        }
      }

      .command-container {
        border: 1px solid rgba(255, 255, 255, 0.35);

        .header {
          border-bottom: 1px solid rgba(255, 255, 255, 0.35);
          background-color: #21252B;

          .button {
            &:hover {
              svg {
                fill: #eee;
              }
            }

            svg {
              fill: #ccc;
            }

            &:hover {
              i {
                color: #eee;
              }
            }

            i {
              color: #ccc;
            }
          }
        }

        .body {
          textarea {
            background: #282C34;
            color: #eeeeee;
          }
        }
      }
    }

    .btn {
      &.btn-success {
        border: 1px solid #0078d4;
        background: #0078d4;
        color: #ffffff;

        &:hover {
          background: darken(#0078d4, 4);
        }
      }

      &.btn-default {
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: #282C34;
        color: #dddddd;

        &:hover {
          background: darken(#282C34, 3);
        }
      }

      &.btn-danger {
        border: 1px solid #da4453;
        background: #da4453;
        color: #ffffff;

        &:hover {
          background: darken(#da4453, 8);
        }
      }
    }

    .comp_snippet-generator-modal {
      .modal-body {
        .title {
          color: #888888;
          user-select: none;
        }

        .command-container,
        .tags-container,
        .command-params-container,
        .description-container {
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }

        .description-container {
          .description-text {
            color: #eeeeee;
          }
        }

        .tags-container {
          ul {
            li {
              border: 1px solid rgba(255, 255, 255, 0.15);
              background: #21252B;
              color: #cccccc;
              user-select: none;
            }
          }
        }

        .command-container {
          .code {
            color: #ccc;

            span {
              font-weight: bold;
              color: #da4453;
            }
          }
        }

        .command-params-container {
          .form-label {
            color: #eeeeee;
          }
        }
      }
    }

    .comp_snippet-crud-modal {
      .modal-body {
        .form-label {
          color: #dddddd;
        }

        .info-text {
          color: #aaaaaa !important;
        }
      }
    }

    .comp_confirm-dialog {
      .confirm-dialog-content {
        .confirm-dialog-header {
          background: #21252B;
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);

          .title {
            color: #ddd;
          }
        }

        .confirm-dialog-body {
          background: #282C34;

          .text {
            color: #ddd;
          }
        }

        .confirm-dialog-footer {
          background: #21252B;
          border-top: 1px solid rgba(255, 255, 255, 0.15);
        }
      }
    }

    .noty_theme__sunset {
      &.noty_type__success {
        background-color: #007A5A;
        color: #fff;
      }

      &.noty_type__info {
        background-color: #0078d4;
        color: #ffffff;
      }

      &.noty_type__error {
        background-color: #da4453;
        color: #ffffff;
      }
    }
  }
}